---
title: Utiliser les Intégrations
i18nReady: true
---

import IntegrationsNav from '~/components/IntegrationsNav.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'



Les **intégrations Astro** permettent d'ajouter de nouvelles fonctionnalités et de nouveaux comportements à votre projet en quelques lignes de code. Vous pouvez écrire une intégration personnalisée vous-même, utiliser une intégration officielle ou utiliser des intégrations construites par la communauté.

Les intégrations peuvent...

- Débloquer React, Vue, Svelte, Solid et d'autres frameworks UI populaires.
- Intégrer des outils comme Tailwind et Partytown avec quelques lignes de code.
- Ajouter de nouvelles fonctionnalités à votre projet, comme la génération automatique de sitemap.
- Écrire du code personnalisé qui s'accroche au processus de construction, au serveur de développement, et plus encore.

:::tip[Répertoire des intégrations]
Parcourez ou recherchez des centaines d'intégrations officielles et communautaires dans notre [répertoire d'intégrations](https://astro.build/integrations/). Trouvez des packages à ajouter à votre projet Astro pour l'authentification, l'analyse, la performance, le référencement (SEO), l'accessibilité, l'interface utilisateur, les outils de développement, et plus encore.
:::

## Intégrations Officielles

Les intégrations suivantes sont gérées par Astro.

<IntegrationsNav />

## Configuration automatique des intégrations

Astro inclut une commande `astro add` pour automatiser la mise en place des intégrations officielles. Plusieurs plugins communautaires peuvent également être ajoutés en utilisant cette commande. Veuillez consulter la documentation de chaque intégration pour savoir si `astro add` est supporté, ou si vous devez [installer manuellement](#installation-manuelle).

Exécutez la commande `astro add` en utilisant le gestionnaire de paquets de votre choix et notre assistant d'intégration automatique mettra à jour votre fichier de configuration et installera toutes les dépendances nécessaires.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react
  ```
  </Fragment>
</PackageManagerTabs>

Il est même possible d'ajouter plusieurs intégrations en même temps !

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react tailwind partytown
  ```
  </Fragment>
</PackageManagerTabs>

:::note[Gestion des dépendances d'intégration]
Si vous voyez des avertissements comme `Cannot find package '[package-name]'` après avoir ajouté une intégration, votre gestionnaire de paquets peut ne pas avoir installé les [dépendances des pairs](https://nodejs.org/en/blog/npm/peer-dependencies/) pour vous. Pour installer ces paquets manquants, lancez `npm install [nom-du-paquet]`.
:::

## Installation manuelle

Les intégrations Astro sont toujours ajoutées via la propriété `integrations` dans votre fichier `astro.config.mjs`.

Il y a trois façons d'importer une intégration dans votre projet Astro :
1. [En installant un paquet d'intégration npm](#installation-dun-paquet-npm).
2. En important votre propre intégration depuis un fichier local dans votre projet.
3. En écrivant votre intégration en ligne, directement dans votre fichier de configuration.

```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import installedIntegration from '@astrojs/vue';
import localIntegration from './my-integration.js';

export default defineConfig({
  integrations: [
    // 1. Importer à partir d'un paquet npm installé
    installedIntegration(),
    // 2. Importer depuis un fichier JS local
    localIntegration(),
    // 3. Depuis un objet en ligne
    {name: 'namespace:id', hooks: { /* ... */ }},
  ]
})
```

Consultez l'[API intégration](/fr/reference/integrations-reference/) de référence pour connaître les différentes façons d'écrire une intégration.

#### Installation d'un paquet NPM

Installez une intégration en utilisant un gestionnaire de paquet, puis mettez à jour `astro.config.mjs` manuellement.

Par exemple, pour installer l'intégration `@astrojs/sitemap` :

1. Installez l'intégration dans les dépendances de votre projet en utilisant votre gestionnaire de paquets préféré :

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm add @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @astrojs/sitemap
     ```
     </Fragment>
   </PackageManagerTabs>

2. Importez l'intégration dans votre fichier `astro.config.mjs`, et ajoutez-la à votre tableau `integrations[]`, avec toutes les options de configuration :

    ```js title="astro.config.mjs" ins={2} ins="sitemap()"
    import { defineConfig } from 'astro/config';
    import sitemap from '@astrojs/sitemap';

    export default defineConfig({
      // ...
      integrations: [sitemap()],
      // ...
    });
    ```

    Notez que les différentes intégrations peuvent avoir des paramètres de configuration différents. Lisez la documentation de chaque intégration, et appliquez toutes les options de configuration nécessaires à l'intégration choisie dans `astro.config.mjs`

### Options personnalisées

Les intégrations sont presque toujours conçues comme des fonctions _"factory"_ qui renvoient l'objet d'intégration proprement dit. Cela vous permet de passer des arguments et des options à la fonction _"factory"_ afin de personnaliser l'intégration pour votre projet.

```js
integrations: [
  // Exemple : Personnalisez votre intégration avec des arguments de fonction
  sitemap({filter: true})
]
```

### Activer/Désactiver une intégration

Les intégrations Falsy sont ignorées, vous pouvez donc les activer et les désactiver sans vous soucier des valeurs `undefined` et booléennes laissées en suspens.

```js
integrations: [
  // Exemple : Sauter la construction d'un plan du site sous Windows
  process.platform !== 'win32' && sitemap()
]
```

## Mise à jour des intégrations

Pour mettre à jour toutes les intégrations officielles en une seule fois, lancez la commande `@astrojs/upgrade`. Cela mettra à jour Astro et toutes les intégrations officielles vers leurs dernières versions.

### Mise à jour automatique

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Mise à jour d'Astro et des intégrations officielles vers la version la plus récente
  npx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Mise à jour d'Astro et des intégrations officielles vers la version la plus récente
  pnpm dlx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Mise à jour d'Astro et des intégrations officielles vers la version la plus récente
  yarn dlx @astrojs/upgrade
  ```
  </Fragment>
</PackageManagerTabs>

### Mise à jour manuelle

Pour mettre à jour manuellement une ou plusieurs intégrations, utilisez la commande appropriée de votre gestionnaire de paquets.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Exemple : mise à jour des intégrations React et Tailwind
  npm install @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Exemple : mise à jour des intégrations React et Tailwind
  pnpm add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Exemple : mise à jour des intégrations React et Tailwind
  yarn add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
</PackageManagerTabs>

## Supprimer une Intégration

Pour supprimer une intégration, désinstallez d'abord l'intégration de votre projet

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm uninstall @astrojs/react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm remove @astrojs/react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn remove @astrojs/react
  ```
  </Fragment>
</PackageManagerTabs>

Ensuite, supprimez l'intégration de votre fichier `astro.config.*` :

```js title="astro.config.mjs" del={3,7}
import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

export default defineConfig({
  integrations: [
    react()
  ]
})
```

## Trouver d'autres intégrations

Vous trouverez de nombreuses intégrations développées par la communauté dans le [répertoire des intégrations d'Astro](https://astro.build/integrations/). Suivez les liens pour obtenir des instructions détaillées d'utilisation et de configuration

## Construire votre propre intégration

L'API d'intégration d'Astro s'inspire de Rollup et de Vite, et est conçue pour être familière à quiconque a déjà écrit un plugin Rollup ou Vite.

Consultez l'[API intégration](/fr/reference/integrations-reference/) de référence pour apprendre ce que les intégrations peuvent faire et comment en écrire une vous-même.
